<!-- toaster directive -->
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
        <li class="active" ng-bind="title"></li>
    </ul>
</div>

<!-- 加载提醒 -->
<div ng-show="loading" class="text-center m-t-md text-lg"><i class="fa fa-spin fa-spinner"></i> 数据加载中...</div>

<!-- 内容区域 -->
<div ng-hide="loading" class="wrapper-md content">
    <!-- 数据显示 -->
    <div class="wrapper-data">
        <div class="panel panel-default">
            <!-- 头部 -->
            <div class="panel-body">
                <!--<div class="w-lg">-->
                <form ng-submit="searchRe()" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-2">
                            <input type="text" class="form-control" ng-model="searchParams.id" id="id"
                                   placeholder="用户ID">
                        </div>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" ng-model="searchParams.nickName" id="nickName"
                                   placeholder="用户昵称">
                        </div>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" ng-model="searchParams.mobile" id="mobile"
                                   placeholder="手机号码">
                        </div>
                        <div class="col-sm-2">
                            <select class="form-control" ng-model="searchParams.status" id="status" ng-change="searchRe()">
                                <option value="">--状态--</option>
                                <option value="1">正常</option>
                                <option value="2">异常</option>
                            </select>
                        </div>
                        <!--<div class="col-sm-2">-->
                            <!--<select class="form-control" ng-model="searchParams.forbidStatus" id="forbidStatus" ng-change="searchRe()">-->
                                <!--<option value="">&#45;&#45;是否禁言&#45;&#45;</option>-->
                                <!--<option value="Y">已禁言</option>-->
                                <!--<option value="N">未禁言</option>-->
                            <!--</select>-->
                        <!--</div>-->
                        <div class="col-sm-2">
                            <select class="form-control" ng-model="searchParams.isRecormand" id="isRecormand" ng-change="searchRe()">
                                <option value="">--是否为推荐人--</option>
                                <option value="Y">已推荐</option>
                                <option value="N">未推荐</option>
                            </select>
                        </div>
                        <!--<div class="col-sm-2">-->
                            <!--<select class="form-control" ng-model="searchParams.platformSource" id="platformSource" ng-change="searchRe()">-->
                                <!--<option value="">&#45;&#45;平台来源&#45;&#45;</option>-->
                                <!--<option value="1">蜂巢</option>-->
                                <!--<option value="2">趣场景</option>-->
                            <!--</select>-->
                        <!--</div>-->
                        <!--<div class="col-sm-2">-->
                            <!--<select class="form-control" ng-model="searchParams.type" id="type" ng-change="searchRe()">-->
                                <!--<option value="">&#45;&#45;类型&#45;&#45;</option>-->
                                <!--<option value="1">首页banner</option>-->
                                <!--<option value="2">二级banner</option>-->
                            <!--</select>-->
                        <!--</div>-->
                    </div>
                    <div class="form-group">

                        <div class="col-md-1">
                            <label class="col-sm-1 control-label"><button class="ifc-btn btn-primary"  type="submit">查 询</button></label>
                        </div>
                        <div class="col-md-1">
                            <label class="col-sm-1 control-label"><button class="ifc-btn btn-dark" ng-click="clearSearch()" type="reset">清 空</button></label>
                        </div>
                    </div>
                </form>
                <!--</div>-->
            </div>

            <!-- 数据表格 -->
            <div class="table-responsive">
                <table class="table table-striped b-t b-light text-center sort" >
                    <thead>
                    <tr>
                        <!--<th><input type="checkbox" ng-click="selectAll($event)"/>全选</th>-->
                        <th>序号</th>
                        <th>用户ID</th>
                        <th>手机号码</th>
                        <th>昵称</th>
                        <th>注册时间</th>
                        <th>状态</th>
                        <th>是否禁言</th>
                        <th>是否为推荐人</th>
                        <th>登录ip</th>
                        <th>最后登录时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="bannerList">
                    <tr ng-repeat="item in pageInfo.records">
                        <!--<td class="v-middle">-->
                            <!--<input type="checkbox" name="selected" ng-checked="isSelected(item.id)" ng-click="updateSelection($event,item)"/>-->
                        <!--</td>-->
                        <td class="v-middle">{{$index + 1}}</td>
                        <td class="v-middle" >{{item.id}}</td>
                        <td class="v-middle" >{{item.mobile}}</td>
                        <td class="v-middle" >{{item.nickName}}</td>
                        <td class="v-middle">{{item.regTime | date : 'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td class="v-middle">
                            <span ng-if="item.status=='1'">正常</span>
                            <span ng-if="item.status=='2'">异常</span>
                        </td>
                        <td class="v-middle">
                            <span ng-if="item.forbidStatus=='Y'">已禁言</span>
                            <span ng-if="item.forbidStatus=='N'">未禁言</span>
                        </td>
                        <td class="v-middle">
                            <div style="margin-top: 10px; width: 45px; align:center; margin: 0 auto;">
                                <input ng-if="item.isRecormand=='Y'" ng-click="oper(item.id,$event)" id="checked_{{item.id}}"  checked type="checkbox" class="switch" />
                                <input ng-if="item.isRecormand=='N'" ng-click="oper(item.id,$event)" id="checked_{{item.id}}"  type="checkbox" class="switch" />
                                <label class="switchlabel" for="checked_{{item.id}}"></label>
                            </div>
                        </td>
                        <td class="v-middle">{{item.lastestLoginIp}}</td>
                        <td class="v-middle">{{item.lastestLoginTime | date : 'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td class="v-middle">
                            <!--2 要使用删除的话将1 注释将2放开即可使用，目前还用不上删除，但是删除功能已经完善-->
                            <div>
                                    <span>
                                        <a ng-click="addLabel(item.id)" class="btn btn-sm btn-default">
                                        <i class="fa fa-edit m-r-xs text-sm"></i>添加用户标签
                                       </a>
                                    </span>

                                    <span>
                                        <a ng-click="selectLabel(item.id)" class="btn btn-sm btn-default">
                                        <i class="fa fa-edit m-r-xs text-sm"></i>查看添加过的用户标签
                                       </a>
                                    </span>

                                    <span>
                                        <a   ui-sref="main.uc.banner.postList({mobile: item.mobile})" class="btn btn-sm btn-default">
                                        <i class="fa fa-edit m-r-xs text-sm"></i>查看我的帖子
                                       </a>
                                    </span>
                            </div>

                            <div>
                                  <span>
                                        <a   ng-click="preview2(item.id,'N')" ng-if="item.forbidStatus=='Y'" class="btn btn-sm btn-default">
                                        <i class="fa fa-edit m-r-xs text-sm"></i><span style="color: red">取消禁言</span>
                                       </a>
                                    </span>

                                  <span>
                                        <a   ng-click="preview1(item.id,'Y')" ng-if="item.forbidStatus=='N'" class="btn btn-sm btn-default">
                                        <i class="fa fa-edit m-r-xs text-sm"></i>禁言
                                       </a>
                                    </span>

                                    <span>
                                        <a   ui-sref="main.uc.banner.update({id: item.id})" class="btn btn-sm btn-default">
                                        <i class="fa fa-edit m-r-xs text-sm"></i>编辑
                                       </a>
                                    </span>

                            <!--该功能已经完成，暂时不用删除，如果需要代码放开即可-->
                                    <span>
                                        <a ng-click="deleteById(item.id)" class="btn btn-sm btn-default">
                                        <i class="fa fa-ban m-r-xs text-sm"></i>删除
                                       </a>
                                    </span>
                            </div>

                        </td>
                    </tr>
                    </tbody>
                </table>
            </div><!-- /.table-responsive -->

            <div class="cover" ng-show="firstApply1">
                <div class="firstApplyWrap1 noselect" style="overflow-y:scroll">
                    <div class="clear">
                        <i style="float: right; margin-top: 5px; margin-right: 5px; cursor: pointer; color:#ccc; font-size: 30px;" class=" iconfont closeBtn noselect" ng-click="firstApply1=false">&#xe608;</i>
                    </div>
                    <div class="title">
                        <div class="row"  >
                            <div class="col-sm-3 text-right" style="font-size: 18px;color: #0a1015">标签类型:</div>
                            <div class="col-sm-3 text-left" style="font-size: 18px;color: black"> <input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"> 全选 </div>
                        </div>

                        <div class="row" ng-repeat="items in pageInfos.records" style="font-size: 18px;white-space:nowrap;
                        color:#a94442;padding:18px 86px 0 130px;text-align:center;line-height: 2em;">
                            <div class="col-sm-3"></div>
                            <div class="col-sm-3 text-left" ><input type="checkbox" ng-model="state" id="state" class="checkitem"  name="targetDeviceTypes" ng-checked="selectAll"  value="{{items.labelNo}}"> {{items.labelName}}</div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" ng-click="firstApply1=false" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" ng-click="saveMakeUp(id)">确定</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cover" ng-show="firstApply2" >
                <div class="firstApplyWrap2" style="overflow-y:scroll">
                    <div class="clear"><i style="float: right; margin-top: 5px; margin-right: 5px; cursor: pointer; color:#ccc; font-size: 30px;" class=" iconfont closeBtn noselect" ng-click="firstApply2=false">&#xe608;</i></div>
                    <div class="title" >
                        <div class="modal-header">
                            <h4 class="modal-title" id="CashLabel" style="font-size: xx-large;text-align:center">已添加过的用户标签展示</h4>
                        </div>
                        <div class="modal-body">

                            <!-- 数据表格 -->
                            <div class="table-responsive">
                                <table class="table table-striped b-t b-light text-center">
                                    <thead>
                                    <tr>
                                        <th style="font-size:large">标签名称</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="items in pageInfoAdd" style="color:green;">
                                        <td class="v-middle" title="{{items.labelName}}">{{items.labelName}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div><!-- /.table-responsive -->

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" ng-click="firstApply2=false" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cover" ng-show="firstApply">
                <div class="firstApplyWrap noselect">
                    <div class="clear"><i class="iconfont closeBtn noselect" ng-click="firstApply=false">&#xe608;</i></div>
                    <div class="title">
                        <select class="form-control" ng-model="forbiddenTime" id="forbiddenTime" >
                            <option value="">--禁言时间--</option>
                            <option value="1">1天</option>
                            <option value="7">7天</option>
                            <option value="30">1个月</option>
                            <option value="180">6个月</option>
                            <option value="99999">永久</option>
                            <!--<option value="3/(24*60)">3分钟</option>-->
                        </select>

                    </div>
                    <div class="col-md-5">
                        <label class="col-sm-1 control-label" style="padding-left: 60%;padding-top: 20%"><button class="ifc-btn btn-primary"  ng-click="save(period,userId,forbidStatus)">保存</button></label>

                    </div>
                </div>
            </div>
            <!-- 底部分页 -->
            <span data-ng-include=" 'src/tpl/pageInfo.html' "></span>
        </div><!-- /.panel -->
    </div><!-- /.wrapper-data -->

</div><!-- /.wrapper-md -->

<style>
    .cover {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 2000;
        top: 0;
        left: 0;
        /* display: none; */
    }

    .firstApplyWrap1{
        width: 700px;
        height:400px;
        background:#f0f4f7;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        border-radius: 5px;
        overflow: hidden;
    }

    .firstApplyWrap2{
        width: 800px;
        height:500px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        border-radius: 5px;
        overflow: hidden;
    }

    .firstApplyWrap{
        width: 550px;
        height:280px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        border-radius: 5px;
        overflow: hidden;
    }
    .firstApplyWrap .title{
        font-size: 18px;
        color:#333;
        padding:18px 86px 0 130px;
        text-align: center;
        line-height: 2em;
    }
    .firstApplyWrap .closeBtn,.finishData .closeBtn{
        font-size: 30px;
        padding:5px 20px 0 0;
        border-radius: 50%;
        color: #ccc;
        float: right;
        cursor: pointer;
    }
    .finishData .closeBtn{
        position: absolute;
        top:10px;
        right:10px;
    }
    .firstApplyWrap .bkgIcon{
        position: absolute;
        left: 54px;
        top:87px;
        font-size: 50px;
        color:#FFB136;
    }
    .firstApplyWrap .applyBtnWrap{
        position: absolute;
        bottom: -2px;
        width: 100%;
    }
    .firstApplyWrap .applyBtn{
        width: 50%;
        height:70px;
        line-height: 70px;
        background: #FFB135;
        font-size: 20px;
        text-align: center;
        color:#fff;
        cursor: pointer;
        float:left;
    }
    .firstApplyWrap .applyBtn:last-child{
        background: #5796FC;
    }


    .switch{
        display:none;
    }
    .switchlabel{
        position:relative;
        display: block;
        padding: 1px;
        border-radius: 24px;
        height: 22px;
        margin-bottom: 15px;
        background-color: #eee;
        cursor: pointer;
        vertical-align: top;
        -webkit-user-select: none;
    }
    .switchlabel:before{
        content: '';
        display: block;
        border-radius: 24px;
        height: 22px;
        background-color: #BFBFBF;
        -webkit-transform: scale(1, 1);
        -webkit-transition: all 0.3s ease;
    }
    .switchlabel:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px;
        width: 22px;
        height: 22px;
        border-radius: 22px;
        background-color: white;
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
        -webkit-transform: translateX(-9px);
        -webkit-transition: all 0.3s ease;
    }
    .switch:checked~label:after{
        -webkit-transform: translateX(9px);
    }
    .switch:checked~label:before{
        background-color:green;
    }
</style>